<template>
	<el-row class="bg" type="flex" justify="center">
		<el-col :span="8" :offset = "10" id="loginFrame"> 
			<el-row >
				<div style="font-size:14px;color:#1F2D3D">丹露云自动化测试平台</div>
			</el-row>
			<el-form label-width="0px;" class="loginForm" :model="loginForm" :rules="rules" ref="loginForm" style="text-align:right;margin-top:114px;width:344px">
				<el-col style="text-align:left">
					用户名：
				</el-col>
				<el-form-item  prop="account" >
					<el-input v-model="loginForm.account" class="login-item" placeholder="请输入LDAP账号" auto-complete="off"></el-input>
				</el-form-item>
				<el-col style="text-align:left">
					密码：
				</el-col>
				<el-form-item  prop="password">
					<el-input v-model="loginForm.password" type="password" class="login-item" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item  prop="password" style="text-align:left">
					<el-checkbox v-model="remaind" @change="remaindChange">记住用户名</el-checkbox>
				</el-form-item>

				<el-form-item style="margin-top:42px" >
					<el-button type="primary" style="width:344px" @click="login()" :disabled="!loginForm.account||!loginForm.password">登录</el-button>
				</el-form-item>				
			</el-form>
		</el-col>
		
	</el-row>
</template>

<script>
  export default {
    name: 'Login',
    data: function() {
    	var data  ={
    		remaind :  localStorage.getItem("remaind") == '1' ,

    		loginForm : {
    			account : localStorage.getItem("remaind") == '1'  ? localStorage.getItem("account") : "",
    			password: ""
    		},
    		userUpdateDialog : false,
    		userForm : {
    			account : "",
    			trueName : "",
    			role : ""
    		},
    		rules:{
    			account:[
    				{required:true,message:"请输入用户名",trigger:'blur'}
    			],
    			password:[
    				{ required: true, message: '请输入密码', trigger: 'blur' },
    			],
    			trueName:[
    				{ required: true, message: '请输入您的真实姓名', trigger: 'blur' },
    			],
    			
    		}
    	}
      return data
    },
   	methods: {
   		login : function(){
   			var that = this;
   			this.$refs['loginForm'].validate((valide) =>{
   				if (valide) {
   					var reqData = {
   						account : that.loginForm.account.trim(),
   						userPassword : that.loginForm.password,
   					}
   					var url = '/api/login/login';
		            this.$http.post(url,reqData).then(({
		                data,
		                statusText
		            }) => {
		                if (data.status == 0) {
		                	that.$store.commit('login',data.data)
		                	that.$message.success("登录成功");
		                } else {
		                	that.$message.error("登录失败");
		                }
		            });
   				}
   			})
   		},
   		/**
   		 * 记住用户名和密码
   		 * @return {[type]} [description]
   		 */
   		remaindChange : function(){
   			//记住用户名和密码
		   	if (this.remaind) {
		   		localStorage.setItem("remaind",'1')
		   	}else{
		   		localStorage.setItem("remaind",'0')
		   	}
   		},
   		debugge : function(){
   			debugger
		}
    },
  }
</script>

<style >

	#loginFrame{
		margin-top: 100px;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 14px;
	}
	.loginForm input{
		/*width: 344px !important*/
	}
	.login-item{
		text-align: left;
		max-width: 300px;
	}
	#bg{
	  width: 100%;
	  min-height: 700px;
	  z-index: -1;

	}
	.login-item{
		max-width: 344px
	}
	#checkbox{
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	.footer{
		text-align: center;
		position: fixed;
		bottom: 0px;
		z-index: -1;
	}
</style>